<template>
  <div class="app-container">
    <div class="filter-container" align="left">
      <!-- <el-input placeholder="请输入名称搜索" style="width: 200px;" class="filter-item" v-model="search" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchByName_">
        搜索
      </el-button> -->

      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleCreate">
        添加商品
      </el-button>
      <el-select v-model="producttypeId" @change="selectChange" placeholder="根据类别搜索" clearable style="width: 200px"
        class="filter-item">
        <el-option v-for="item in searchByType" :key="item.producttypeId" :label="item.producttypeName"
          :value="item.producttypeId"></el-option>
      </el-select>

    </div>

    <el-table :data="productList" style="width: 100%">
      <el-table-column label="序号" align="center" width="80" type="index" :index="ordernumber">
        <!-- <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <img width="50" height="50" :src="scope.row.productImg" alt="">
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" width="80">
        <template slot-scope="scope">
          <span style="color: orangered;font-size: larger;">￥{{ scope.row.productPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.productcategoryName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.producttypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="400" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.productDetails }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" plain type="danger" @click="handleDelete(scope.row.productId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging" style="float: right;">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="10"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <!-- 弹框 -->
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.productName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品图片" prop="image" :label-width="formLabelWidth">
          <el-upload class="avatar-uploader" list-type="picture-card"
            action="http://172.30.1.163:3000/admin/common/upload" :auto-upload="true" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload" :on-remove="handleRemove">
            <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" height="148" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.productPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="form.productCategory" placeholder="请选择商品类型">
            <el-option v-for="item in categoryOptions" :key="item.producCategoryId" :label="item.producttypeName"
              :value="item.productTypeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别" :label-width="formLabelWidth">
          <el-select v-model="form.productType" placeholder="请选择商品类型">
            <el-option v-for="item in typeOptions" :key="item.producttypeId" :label="item.producttypeName"
              :value="item.producttypeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情" :label-width="formLabelWidth">
          <el-input v-model="form.productDetails" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectAll, update, del, add, searchByName, selectByType } from '../../api/productmanage/productinfo.js';
import { selectAll as selectAllType, selectAllCategory } from '../../api/productmanage/producttype.js';
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogFormVisible: false,
      dialogStatus: '',
      formLabelWidth: '100px',
      updateId: null,
      search: '',
      productList: [
        {
          productId: 1,
          productName: '麦吉克成犬粮20斤',
          productPrice: '200',
          productType: '狗粮',
          productImg: 'https://image2.cn10.cn/upload/images/20211117/12263472097_800x800.jpg',
          productDetails: '狗吃了会写vue'
        },
      ],
      form: {},
      categoryOptions: [{
        productTypeId: '选项1', producttypeName: '宠物食品'
      }],
      typeOptions: [],
      searchByType: [],
      pageNum: 1,
      total: 10,
      producttypeId: '',
    }
  },
  computed: {
    ordernumber() {
      return (this.pageNum * 10 - 10) + 1
    }
  },
  methods: {
    async selectChange() {
      console.log(this.producttypeId)
      let res = await selectByType(this.producttypeId);
      console.log(res);
      this.productList = res.data;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selectAll_();
      console.log(`当前页: ${val}`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleAvatarSuccess(res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
      console.log(this.dialogImageUrl);
      console.log(res.data);
      this.form.productImg = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleCreate() {
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
    },
    // 新增
    async createData() {
      let res = await add(this.form);
      console.log(res)
      this.$notify({
        title: 'Success',
        message: 'Created Successfully',
        type: 'success',
        duration: 2000
      })
      this.dialogFormVisible = false;
      this.selectAll_();
    },
    handleUpdate(row) {
      this.form = Object.assign({}, row);
      this.dialogFormVisible = true;
      // this.form.productCategory=this.form.productcategoryName
      this.dialogStatus = 'update';
    },
    // 更新
    async updateData() {
      console.log(this.form)
      let res = await update(this.form);
      console.log(res)
      this.dialogFormVisible = false;
      this.selectAll_();
      this.$notify({
        title: 'Success',
        message: 'Update Successfully',
        type: 'success',
        duration: 2000
      })
    },
    // 删除
    async handleDelete(id) {
      let res = await del(id);
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.selectAll_();
    },
    // 查询所有
    async selectAll_() {
      let res = await selectAll(this.pageNum);
      console.log(res)
      this.productList = res.data.list;
      this.total = res.data.total;
    },
    // 根据种类名查询
    async searchByName_() {
      let res = await searchByName(this.search, this.pageNum);
      console.log(res)
      this.productList = res.data.list;
      this.total = res.data.total;


    },
    // 查询所有商品类型 生成下拉框
    async selectAllCategory_() {
      let res = await selectAllCategory();
      this.categoryOptions = res.data;
    },
    // 查询所有商品类别 生成下拉框
    async selectAllType_() {
      let res = await selectAllType();
      this.typeOptions = res.data;
      this.searchByType = res.data;
    },
  },
  created() {
    this.selectAll_();
    this.selectAllCategory_();
    this.selectAllType_();
  },
}
</script>

<style>
.paging {
  margin-top: 20px;
}
</style>